<template>
  <div>
    <h3 style="text-align: center; font-size: 20px; margin-bottom: 10px">
      利润计算
    </h3>
    <div style="display: flex; justify-content: space-between">
      <div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="采购价格" prop="zong">
            <!-- <el-input-number
            style="width: 200px"
              v-model="ruleForm.weight"
              :min="1"
              :max="10000000"
              label="请输入包裹重量"
            ></el-input-number> -->
            <el-input style="width: 200px" v-model="ruleForm.zong" />
            <!-- <span style="margin-left: 10px; color: #999">
              kg</span -->
            <!-- > -->
          </el-form-item>
          <el-form-item label="产品分类" prop="fenlei">
            <el-select
              style="width: 200px"
              v-model="ruleForm.fenlei"
              filterable
              @change="xuan"
              placeholder="请选择"
            >
              <el-option
                v-for="item in yoData"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="平台佣金">
            <el-input-number
              style="width: 200px"
              v-model="ruleForm.lu"
            ></el-input-number>
            <!-- <span style="margin-left: 10px; color: #999"> %</span> -->
          </el-form-item>
          <el-form-item label="物流价格" prop="price">
            <el-input-number
              style="width: 200px"
              v-model="ruleForm.price"
              :min="1"
              :max="80"
              label="请输入物流价格"
            ></el-input-number>
            <span style="margin-left: 10px; color: #999"> </span>
          </el-form-item>

          <el-form-item>
            <el-button
              round
              color="rgb(78 168 185)"
              style="
                width: 80px;
                color: #fff;
                margin-bottom: 20px;
                font-size: 12px;
              "
              type="primary"
              @click="submitForm('ruleForm')"
              >计算</el-button
            >
            <el-button
              round
              color="rgb(108 198 215)"
              style="
                width: 80px;
                color: #fff;
                margin-bottom: 20px;
                font-size: 12px;
              "
              type="primary"
              @click="resetForm('ruleForm')"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <div
        style="
          width: 50%;
          height: 200px;
          border: 1px solid #eee;
          margin-right: 10px;
        "
      >
        <p style="text-align: center; font-weight: 700; font-size: 16px">
          计算结果
        </p>
        <div style="height: 200px; overflow-y: scroll">
          <el-descriptions class="margin-top" :column="1" size="Small" border>
            <el-descriptions-item label-class-name="my-label">
              <template #label>
                <i class="el-icon-user"></i>
                利润
              </template>
              {{ zongprice }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {h} from "vue";
import {ElNotification} from "element-plus";
//   import {shopShu,countw} from '@/api/login'
import {wuliujisuan, yongjion} from "../../api/index";
export default {
  data() {
    return {
      zongprice: null,
      ruleForm: {
        zong: undefined,
        fenlei: undefined,
        lu: undefined,
        price: undefined,
      },
      svalue: null,
      datas: [],
      rules: {
        zong: [{required: true, message: "请输入采购价格", trigger: "blur"}],
        fenlei: [{required: true, message: "请选择分类", trigger: "change"}],
        lu: [
          {
            type: "date",
            required: true,
            message: "请输入佣金",
            trigger: "change",
          },
        ],
        price: [
          {
            type: "date",
            required: true,
            message: "请输入物流价格",
            trigger: "change",
          },
        ],
      },
      yoData: [],
    };
  },

  created() {},
  mounted() {
    this.getyongjion();
  },
  methods: {
    xuan(e) {
      console.log(e);
      this.ruleForm.lu = e;
    },
    yongd(e) {
      console.log(e);
    },
    async getyongjion() {
      const {data} = await yongjion();
      this.yoData = data;
      this.$forceUpdate();
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm);

          this.zongprice = (
            this.ruleForm.zong -
            this.ruleForm.price -
            this.ruleForm.zong * this.ruleForm.lu
          ).toFixed(2);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
:deep(.my-label) {
  width: 40%;
}
</style>
